<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			ul {
				list-style: none;
				width: 450px;
				height: 360px;
				margin: auto;
				border: 2px solid black;
			}
			
			li {
				float: left;
				height: 100%;
				width: 50px;
				box-sizing: border-box;
				border: 5px solid black;
				position: relative;
			}



		</style>
	</head>
	<body>

		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>

		<audio>
			<source src="music/1.oga"></source>
		</audio>
		<!-- <video>
			<source src="music/2.oga">
		</video>
		<video>
			<source src="music/3.oga">
		</video>
		<video>
			<source src="music/4.oga">
		</video>
		<video>
			<source src="music/5.oga">
		</video>
		<video>
			<source src="music/6.oga">
		</video>
		<video>
			<source src="music/7.oga">
		</video>
		<video>
			<source src="music/8.oga">
		</video>
		<video>
			<source src="music/9.oga">
		</video> -->

		
		
	</body>
</html>
<script>
	var arr = [65, 83, 68, 70, 71, 72, 74, 75, 76];
	var videoObj = document.getElementsByTagName('audio')[0];
	// console.log(videoObj.children[0].src);
	var lis = document.getElementsByTagName('li');

	var flag = false;
	document.onkeydown = function(e) {
		if (flag) return;
		flag = true;
		var index = arr.indexOf(e.keyCode);
		if (index == -1) return;
		videoObj = document.getElementsByTagName('audio')[0];
		videoObj.children[0].setAttribute("src", "music/" + (index + 1) + ".oga");

		videoObj.play();
		lis[index].style.top = "2px";
		lis[index].style.border = "5px solid yellow";
	};

	document.onkeyup = function(e) {
		flag = false;
		videoObj.pause();
		var index = arr.indexOf(e.keyCode);
		if (index == -1) return;
		lis[index].style.top = "0";
		lis[index].style.border = "5px solid black";
	};

	console.dir(videoObj[0]);




</script>
<script>
	// 作业: 碰撞检测
	// 作业2: 随机产生100个内容随机, 大小随机, 颜色随机, 位置随机的小球, 点击某个小球, 就可以通过键盘改变该小球的位置, 可以通过输入框改变该小球颜色

	// 拓展题: 八角放大效果



</script>


